<template>
  <view class="pa-3">
    <view class="bdrs-8 ov-h">
      <q-item arrow clickable height="68px" @click="onAddr">
        <template #label>
          <view class="lh-17" v-if="addrInfo">
            <view>{{ addrInfo.title }} {{ pickAddr.detail }}</view>
            <view class="op-5 fz-14"
              >{{ pickAddr.name }} {{ pickAddr.phone }}</view
            >
          </view>
          <view v-else>请选择收货地址</view>
        </template>
      </q-item>
    </view>

    <view class="bg-cell bdrs-8 ov-h mt-3">
      <view class="pa-3 al-c">
        <span class="fz-16">商品</span>
        <!-- <span class="ml-auto color-1 fz-13">立即送达</span> -->
      </view>
      <list-confirm-goods :list="goodsList" :total="totalInfo.num" />
    </view>

    <view class="mt-3 bdrs-8 ov-h">
      <q-item label="商品总价" :value="'￥' + totalInfo.price"></q-item>
      <q-item
        label="代金券"
        arrow
        clickable
        @click="$navTo('user/coupon-list?act=pick')"
      >
        <view class="op-5 fz-14">
          <span v-if="pickCoupon.id">{{ pickCoupon.title }}</span>
          <span v-else>请选择</span>
        </view>
      </q-item>
    </view>

    <view style="padding-top: 64px">
      <u-safe-bottom />
    </view>

    <view class="pos-btm pos-f z-100 bg-cell">
      <view class="al-c px-3 py-2">
        <view class="d-flex al-end red-1 fw-b">
          <span class="fz-14">￥</span>
          <span class="fz-20">{{ finalPrice }}</span>
        </view>

        <view class="ml-auto" style="width: 140px">
          <u-button type="primary" :loading="posting" @click="postOrder"
            >确认下单</u-button
          >
        </view>
      </view>
      <u-safe-bottom />
    </view>
  </view>
</template>

<script>
import mixin from "./mixin-cart";

export default {
  mixins: [mixin],
  computed: {
    finalPrice() {
      let price = this.totalInfo.price * 1;
      if (this.pickCoupon.id) {
        price -= this.pickCoupon.cut_total;
      }
      if (price < 0) return 0;
      return price.toFixed(2);
    },
  },
  data() {
    return {
      posting: false,
    };
  },
  onLoad() {
    this.$setStore({
      pickCoupon: {},
    });
  },
  methods: {
    onAddr() {
      let path = "user/addr-list?act=pick";
      this.$navTo(path);
    },
    async postOrder() {
      let hasOrd = false;
      try {
        const form = {
          buy_list: this.goodsList,
          final_price: this.finalPrice,
          addr_id: this.pickAddr.id,
        };
        if (!form.addr_id) {
          await this.$alert("请选择收获地址");
          this.onAddr();
          return;
        }
        if (this.pickCoupon.id) {
          form.coupon_info = this.pickCoupon;
        }
        this.posting = true;
        const { data } = await uni.$api.post(uni.$apiHub.postOrder, form);
        hasOrd = true;
        // this.$loading();
        if (data.payment) {
          const info = await this.$h.uniPay(data.payment);
          console.log(info);
          const paid = false; //await this.getPaid(data.order_no);
          // this.$toast(paid ? "已支付" : "支付成功", true);
          await this.$sleep(paid ? 300 : 800);
        }
      } catch (error) {
        console.log(error);
        // uni.hideLoading();
      }
      this.posting = false;
      if (hasOrd) {
        this.$redirectTo("order");
        this.clearCart();
      }
    },
  },
};
</script>
